<template>
    <div class="beijing">
        <van-nav-bar
            style="background-color: #EDEDED;"
            title="新的朋友"
            left-arrow
            @click-left="onClickLeft"
            />
        <el-input
            class="input"
            placeholder="Chats号"
            prefix-icon="el-icon-search"
            @keyup.enter.native="sosuohoay"
            v-model="input2">
        </el-input>
        <p class="pjilu">添加记录</p>
        <ul>
            <li v-for="list in $store.state.Friendslist" 
                style="background-color: #FFFFFF;
                background-size: 100% 100%;
                width: 100%;height: 60px;
                border-bottom: 1px solid honeydew;float: left;">

                <img :src="list.uimg" 
                    style="width: 40px;
                    height: 40px;margin-left: 3%;
                    margin-top: 3%;
                    margin-bottom: 3%;
                    border-radius: 3px;
                    float: left;
                    background-repeat:no-repeat;">

                <p style="font: 3px;
                    margin-top: 3%;
                    margin-left: 15%;">{{list.uname}}
                </p>

                
            </li>
        </ul>
    </div>
</template>

<script>


export default {
    name:'Searchpage',
    data() {
        return {
            input2:''
        }
    },
    methods:{
        sosuohoay(){
            if(this.$store.state.udate.uaccount == this.input2){
                this.$message.error('您不能添加自己为好友');
            }else{
                const options = {
                method: 'GET',
                headers: {
                    "Content-Type": 'application/json'
                }
                }
                fetch(`http://8.130.95.37:8085/getUserAdd/${this.input2}`, options).then(res => res.json()).then(res => {
                    if (res[0]!= null) {
                        this.$store.state.getUserAdd=res[0]
                        console.log(this.$store.state.getUserAdd);
                        this.$router.push('/addahomepage')
                    }else{
                        this.$message.error('查无此人');
                    }
                    
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        onClickLeft(){
            this.$router.go(-1)
        }
    }
    
}
</script>


<style scoped>
.beijing{
    position:fixed;
    background-color: #EDEDED;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}
.input{
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}
.pjilu{
    margin-top: 3%;
    margin-left: 5%;
    margin-bottom: 3%;
}

</style>
